import React, { Component } from 'react'
import { Button, Form, Input, Modal, Row, Tag } from 'antd'
import { connect } from '../../../states/customerCenter/newCommunicationRecord'
import connectModalHelper from '../../../mixins/modal'

import SelectSinglePatientAsync from '../../common/SelectSinglePatientAsync'
import api from '../../../api/api'


const formItemStyle = {
  labelCol: { span: 3 },
  wrapperCol: { span: 21 }
}

class CommunicationModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      patientInfo: null,
      id: null
    }
  }

  // 年龄计算
  getAgeByBirthday(dateString) {
    if (!dateString) return ''
    const today = new Date()
    const birthDate = new Date(dateString)
    return today.getFullYear() - birthDate.getFullYear()
  }

  // 性别
  getGender(t) {
    if (t === 1) {
      return '男'
    } else if (t === 0) {
      return '女'
    } else {
      return '未知'
    }
  }

  hideModal = () => {
    this.props.resetAction()
    this.props.closeModal()
  }

  // 选中会员的id
  selectPatient = async value => {
    const res = await api.getPatient(value)
    this.setState({
      patientInfo: res,
      id: value
    })
  }

  submit = () => {
    if (this.state.id) {
      this.props.history.push(
        `/customerDetails/${this.state.id}/CreateHealthRecords`
      )
    }
  }

  render() {
    const style = {
      box: {
        paddingLeft: '40px'
      },
      border: {
        borderBottom: '1px solid #f1ecec',
        marginBottom: '10px',
        paddingBottom: '5px'
      },
      title: {
        display: 'inline-block',
        width: '80px'
      }
    }
    const { patientInfo } = this.state
    return (
      <div>
        <Modal
          title="录入健康档案"
          visible={true}
          width={900}
          maskClosable={false}
          onCancel={this.hideModal}
          style={{ backgroundColor: '#f8f8f8' }}
          footer={
            <Row>
              <Button onClick={this.submit} type="primary">
                下一步
              </Button>
              <Button onClick={this.hideModal} className="cancelButton">
                取 消
              </Button>
            </Row>
          }
        >
          <Form>
            <Form.Item field="patientInfo" label="选择会员" {...formItemStyle}>
              {this.patientId || this.recordId ? (
                <Input disabled={true} />
              ) : (
                <SelectSinglePatientAsync
                  placeholder="输入会员姓名/身份证号/手机号/其他联系方式"
                  disabled={!!this.patientId || !!this.recordId}
                  onSelect={this.selectPatient}
                />
              )}
            </Form.Item>
          </Form>

          <div style={style.box}>
            <div style={style.border}>
              <span style={style.title}>姓名：</span>
              {patientInfo ? patientInfo.name : '--'}
            </div>
            <div style={style.border}>
              <span style={style.title}>年龄：</span>{' '}
              {patientInfo ? this.getAgeByBirthday(patientInfo.birthday) : '--'}
            </div>
            <div style={style.border}>
              <span style={style.title}>性别：</span>{' '}
              {patientInfo ? this.getGender(patientInfo.sex) : '--'}
            </div>
            <div style={style.border}>
              <span style={style.title}>现有疾病：</span>
              {patientInfo && patientInfo.diseases.length
                ? patientInfo.diseases.map(item => (
                    <Tag key={item.id}> {item.name} </Tag>
                  ))
                : '--'}
            </div>
            <div style={style.border}>
              <span style={style.title}>门慢疾病：</span>
              {patientInfo && patientInfo.chronicDiseases.length
                ? patientInfo.chronicDiseases.map(item => (
                    <Tag key={item.id}> {item.name} </Tag>
                  ))
                : '--'}
            </div>
            <div style={style.border}>
              <span style={style.title}>签约机构：</span>
              {patientInfo && patientInfo.hospital
                ? patientInfo.hospital.name
                : '--'}
            </div>
            <div style={style.border}>
              <span style={style.title}>签约医生：</span>
              {patientInfo && patientInfo.doctor
                ? patientInfo.doctor.name
                : '--'}
            </div>
          </div>
        </Modal>
      </div>
    )
  }
}

export default connectModalHelper(connect(CommunicationModal))
